<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        .fc {
            color: brown;
        }

        .fc1 {
            color: blue;
        }

        .fs {
            font-size: 26px;
        }

        .bc {
            background-color: #cccccc;
        }

        .border {
            border: 1px solid brown;
        }

        .success {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <p v-bind:id="str">绑定属性id</p>
        <p :id="str">绑定属性id</p>
        <input type="button" value="修改str" @click="str='新字符串'">

        <!-- 自定义属性 -->
        <p :itany="`网博 ${str}`">自定义属性</p>
        <p :data-name="str">自定义属性</p>
        <p :dataName="str">自定义属性</p>
        <!-- 
            boolean 类型属性 绑定的数据会被v-bind完成类型转换，转为boolean
            v-bind 重写了类型转换规则 - 转换为了真实开发的数据描述规则
            v-bind 的 boolean 转换使用的是否有值的描述规则
        -->
        <input type="text" :disabled="true" />
        <input type="text" :disabled="flag">
        <input type="button" value="修改flag" @click="flag=!flag">
        <hr>

        <input type="text" :disabled="''" />
        <input type="text" :disabled="0" />
        <input type="text" :disabled="undefined" />
        <input type="text" :disabled="null" />
        <hr>

        <!-- 
            class属性 
              v-bind:class="string|Array|Object"
                string=字符串以标准的 HTML class取值方式定义
                Array=以JS数组中每个元素描述该标签具有样式
                Object=以JS对象中元素的 key描述样式名，value描述样式状态
                    value 取值为 boolean 类型，true 表示key样式需要加载，false表示不需要加载
        -->
        <p class="fc fs bc border">html的class定义</p>
        <p :class="classStr">html的class定义：String</p>
        <input type="button" value="添加样式" @click="classStr=classStr+' border'">
        <hr>
        <p :class="classArray">html的class定义：array</p>
        <input type="button" value="添加边框" @click="classArray.push('border')">
        <input type="button" value="删除字体大小" @click="removeFs()">
        <hr>
        <div>
            <label for="emial"></label>
            <input type="text" name="email" id="email" @input="userInput">
            <span :class="classObj">{{msg}}</span>
        </div>
        <hr>
        <!-- 
            style 样式属性
            v-bind:style="string|Object|Array"
                string=以行内样式定义规则描述绑定的样式
                Object=key表示需要绑定的样式，value表示为该样式的合法取值
                Array=行内样式组合，把对象样式进行组合输出
        -->
        <p :style="styleStr">html行内样式-string</p>
        <p :style="styleObj">html行内样式-object</p>
        <input type="button" value="删除" @click="removeColor">
        <p :style="[styleObj,styleObj1]">html行内样式-Array</p>

        <!-- v-bind对于class和style是在原值上进行操作，不是覆盖 -->
        <p class="fc fs bc" :class="'border'">样式</p>
        <p style="font-size:30px" :style="'color:'+color">哈哈啊啊</p>
        <input type="color" @change="color=$event.target.value">
        <hr>

        <!-- 
        ** 在HTML和JS规范中，标签存在两种属性
            在HTML标签上直接定义的属性叫做 HTML属性（标签属性）
            通过JS获取标签创建的DOM对象 所携带的属性叫做 DOM属性
            w3c 在规范中将 部分 HTML属性和DOM属性完成了映射对应
            id=>id  style=>style  class=>className
        
            v-bind 指令 可以完成标签属性的绑定也可完成DOM属性的绑定
        
        -->
        <p :class="classArray">标签属性绑定</p>
        <!-- <p :className="classArray">标签Dom属性绑定</p> -->
        <!-- <p :class-name="classArray">标签Dom属性绑定</p> -->

        <!-- 
            .prop 绑定的DOM属性 
            v-bind对于DOM属性绑定时，会基于DOM属性的取值完成数据转换
            转换规则 遵循原生JS的规则
        -->
        <!-- prop可以将Dom属性转换成对应的html属性 -->
        <p :class-name.prop="classArray">DOM属性绑定</p>
        <p :class-name.prop="classObj">DOM属性绑定</p>
        <p :class-name.prop="classStr">DOM属性绑定</p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            str: "测试属性绑定",
            flag: false,
            classStr: "fc fs bc ",
            num: 99,
            classArray:["fc","fs","bc"],
            classObj:{
                success:false,
                error:false
            },
            msg:"",
            styleStr:"color:red;font-size:20px;",
            styleObj1:{
                border:"1px solid black"
            },
            styleObj:{
                color:"red",
                // "font-size":"20px"
                fontSize:"20px"
            },
            color:"pink"
        },
        methods: {
            removeFs(){
                let i=this.classArray.indexOf('fs');
                this.classArray.splice(i,1);
            },
            userInput(e){
                let userInput=e.target.value;
                let reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
                let temp=reg.test(userInput);
                if(temp){
                    this.msg="邮箱合法";
                }else{
                    this.msg="邮箱非法";
                }
                this.classObj.success=temp;
                this.classObj.error=!temp;
            },
            removeColor(){
                // let temp=this.styleObj;
                // delete temp.color;
                // console.log(111);
                let temp = this.styleObj;
                console.log(JSON.stringify(temp));
                //BUG
                delete temp.color;
                console.log(JSON.stringify(temp));
            }
        },
    });
</script>

</html>